<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/jquery-kq-shop-detail.css">
    <script src="./js/jquery-3.4.1.min.js"></script>
</head>

<body>
    <div class="shop-detail-box">
        <div id="imgbig">
            <ul>
            </ul>
        </div>
        <div id="imgsmall">
            <input type="button" value="&lt;" id="toleft">
            <ul>
            </ul>
            <input type="button" value="&gt;" id="toright">
        </div>
    </div>
    <script>
        let ulBig = $('#imgbig').children('ul');
        let ulSmall = $('#imgsmall').children('ul');

        function init() {
            ulBig.html('');
            ulSmall.html('');
            for (let i = 0; i < 10; i++) {
                ulBig.html(ulBig.html() + `<li><img src="./shop-detail-images/g${i+1}.jpg" alt=""></li>`)
                ulSmall.html(ulSmall.html() + `<li><img idx="${i}" src="./shop-detail-images/g${i+1}.jpg" alt=""></li>`)
            }
        }
        init();

        let index = 0;
        ulSmall.on('click', 'img', function() {
            $(this).addClass('active').parent('li').siblings().children('img').removeClass('active');
            ulBig.animate({
                left: -$(this).attr('idx') * parseInt(ulBig.find('img').css('width'))
            })
        })
        $('#toleft').on('click', function() {
            ulSmall.animate({
                left: 250 + parseInt(ulSmall.css('left'))
            })
            if (parseInt(ulSmall.css('left')) <= 10) {
                ulSmall.animate({
                    left: 10
                })
            }
        })
        $('#toright').on('click', function() {
            ulSmall.animate({
                left: -250 + parseInt(ulSmall.css('left'))
            })
            console.log();

            if (parseInt(ulSmall.css('left')) < -(parseInt(ulSmall.css('width')) - parseInt($('#imgsmall').css('width')))) {
                ulSmall.animate({
                    left: -(parseInt(ulSmall.css('width')) - parseInt($('#imgsmall').css('width')) + 10)
                })
            }
        })
    </script>
</body>

</html>